﻿CloudDisk.UploadProgressDialog = (function(){
    var dialog = $([
	    '<div class="upload-progress-dialog">',
	        '<div class="dialog-header">',
		        '<div class="dialog-title">正在上传</div>',
			    '<div class="dialog-btn btn-close"></div>',
			    '<div class="dialog-btn btn-max"></div>',
			    '<div class="dialog-btn btn-min"></div>',				
		    '</div>',
	        '<div class="dialog-body"></div>',
	    '</div>'	
	].join(''));
	
	var collapsed = true;
	
	var hidden = true;
	
	var initialized = false;
	
	var isAnimating = false;
	
    //register a template for progress item
	$.templates('progressItemTpl', [
	    '<div class="progress-item" id="{{:id}}_progress">',
		    '<img class="file-icon" src="{{:icon}}" />',
            '<span class="file-name" title="{{:name}}">{{:name}}</span>',
	        '<span class="file-size">{{:size}}</span>',
			'<span class="file-progress"><a>&#160;</a></span>',
	        '<span class="file-status">等待中...</span>',
			'<button class="file-remove" actionId="{{:id}}">删除</button>',
        '</div>'
	].join(''));
	
	function _init(){
	    dialog.appendTo(document.body);
		dialog.find('.btn-min').click(function(){CloudDisk.UploadProgressDialog.collpase();});
	    dialog.find('.btn-max').click(function(){CloudDisk.UploadProgressDialog.expand();});
	    dialog.find('.btn-close').click(function(){CloudDisk.UploadProgressDialog.hide();});
		dialog.click(function(e){
		    var target = e.target;
			if(target.hasAttribute('actionId')){
			    e.stopPropagation();
		        CloudDisk.UploadProgressDialog.removeTask();
				$(target).parent().remove();
			}
		});
		
		//hide the dialog when clicked outside
		$(document).click(function(e){
			if ($(e.target).is('.upload-progress-dialog') || $(e.target).closest('.upload-progress-dialog').length > 0) {
				return false;
			} else {
				CloudDisk.UploadProgressDialog.collpase();
			}
		});
		//reposition when window resize
		$(window).resize(function(e){
			if(!hidden){
				if(collapsed){
					dialog.css('top', $(window).height() - dialog.find('.dialog-header').height());
				} else {
					dialog.css('top', $(window).height() - dialog.height());
				} 
			}
		});

		initialized = true;
	}
	
	return {
	    addTask: function(task){
			//body.prepend($.render.progressItemTpl(task));
			task.size = CloudDisk.Util.formatFileSize(task.size);
			task.icon = CloudDisk.Util.getIconByExtension(task.name.slice(task.name.lastIndexOf('.') + 1)).small;
			dialog.find('.dialog-body').append($.render.progressItemTpl(task));
		},
		
		removeTask: function(){
		
		},
		
		isTaskRemoved: function(taskId){
		    return dialog.find('#' + taskId + '_progress .file-status').length < 1;
		},
		
		update: function(task){
		    dialog.find('#' + task.id + '_progress .file-status').html(task.progress);
			dialog.find('#' + task.id + '_progress .file-progress a').css('width', task.progress);
		},
		
		show: function(){
		    var that = this;
		    if(!initialized){
			    _init();
			}
			
		    if(hidden){
				dialog.show();
			}
			that.expand();
		},
		
		hide: function(){
		    dialog.hide();
			hidden = true;
		},
		
		collpase: function(){
		    if(!collapsed && !isAnimating){
			    isAnimating = true;
			    dialog.css('top', $(window).height() - dialog.height());
				dialog.animate({
					top: '+=' + dialog.find('.dialog-body').height()
				}, 500, function(){ 
				    isAnimating = false;
					collapsed = true;
					dialog.find('.btn-min').hide();
					dialog.find('.btn-max').show();
				});
			}
		},
		
		expand: function(){
		    if(collapsed && !isAnimating){
			    isAnimating = true;
			    dialog.css('top', $(window).height() - dialog.find('.dialog-header').height());
				dialog.animate({
					top: '-=' + dialog.find('.dialog-body').height()
				}, 500, function(){ 
				    isAnimating = false;
					collapsed = false;
					hidden = false;
					dialog.find('.btn-min').show();
					dialog.find('.btn-max').hide();
				});
			}
		}
	};
})();